<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
       	<meta http-equiv="content-type" content="text/html; charset=utf-8">
       	<title>{PAGE_TITLE}</title>	
       	<style type="text/css">
			/*margin and padding on body element
			  can introduce errors in determining
			  element position and are not recommended;
			  we turn them off as a foundation for YUI
			  CSS treatments. */
			body {
				margin:0;
				padding:0;
			}
		</style>
		
       	
    <!-- YUI library -->   		
		<script type="text/javascript" src="lib/YUI/yui/build/yuiloader/yuiloader.js" ></script> 			
		<script type="text/javascript" src="lib/YUI/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
		<script type="text/javascript" src="lib/YUI/yui/build/utilities/utilities.js"></script>			
		<script type="text/javascript" src="lib/YUI/yui/build/dragdrop/dragdrop.js"></script>									
		<script type="text/javascript" src="lib/YUI/yui/build/animation/animation.js"></script>
		<script type="text/javascript" src="lib/YUI/yui/build/container/container.js"></script>
		<script type="text/javascript" src="lib/YUI/yui/build/container/resize-panel.js"></script>	
		<script type="text/javascript" src="lib/YUI/yui/build/button/button-beta.js"></script>		
		<script type="text/javascript" src="lib/YUI/yui/build/calendar/calendar-min.js"></script>
		<script type="text/javascript" src="lib/YUI/yui/build/tabview/tabview.js"></script>
		<script type="text/javascript" src="lib/YUI/yui/build/element/element-min.js"></script>
	<!-- YUI library -->
	
	<!-- YUI style sheets -->
			<link rel="stylesheet" type="text/css" href="lib/YUI/yui/build/assets/skins/sam/calendar.css">  		
		   	<link rel="stylesheet" type="text/css" href="lib/YUI/yui/build/assets/skins/sam/container.css" />				
		   	<link rel="stylesheet" type="text/css" href="lib/YUI/yui/build/assets/skins/sam/tabview.css" />
	<!-- YUI style sheets -->
	
	<!-- fonts -->
			<link rel="stylesheet" type="text/css" href="lib/YUI/yui/build/fonts/fonts-min.css" />
	<!-- fonts -->
	
	<!-- DMS style sheet -->				
			<link rel="stylesheet" type="text/css" href="css/index.css" />
	<!-- DMS style sheet -->
	
	<!-- Xajax initialization code -->
		{XAJAX_INIT}
	<!-- Xajax initialization code -->	
	
	<script type="text/javascript" src="src/dms_functions.js"></script>		
	<script type="text/javascript" src="src/dms_init.js"></script>
	
</head>
<body class="yui-skin-sam">       				

<!--Whole Screen's Table-->
<table width=100% height=100% cellpadding=0 cellspacing=0 bgcolor=gray border=0>
	<tr> 
		<td width=17%>
			<!--Left Sidebar TD-->
			<table bgcolor=gray height=100% width=100%>
				<!--Logo TR-->
				<tr valign=top>
					<td id="logo" align=center>
						LOGO HERE
					</td>
				</tr>
				<!--Navigation TR-->
				<tr valign=top>
					<td class="yui-navset">
						<ul class="yui-nav">        
							<li class="selected"><a href="#taba"><em>Telemarketer: {agentUsername}</em></a></li>				
						</ul>            
						<div class="yui-content">
							Your last login is was on: {lastLogIn}<br />
							<a href="login/logout.php">Logout</a><br />							
							<a href="">Commission</a><br />
						</div>
					</td>
				</tr>
				<!--Calendar TR-->
				<tr valign=top>
					<td class="yui-navset">
						<ul class="yui-nav">        
							<li class="selected"><a href="#tab1"><em>Calendar</em></a></li>        
						</ul>            
						<div class="yui-content" style="padding-left:15px;">
							<div id="cal1Container"></div>
							<script type="text/javascript">
								YAHOO.namespace("example.calendar");
								YAHOO.example.calendar.init = function() {
								YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
								YAHOO.example.calendar.cal1.render();
								}
								YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);
							</script>               
						</div>
					</td>
				</tr>
				<!--Extender TR-->
				<tr>
					<td height=100px></td>
				</tr>
			</table>	
		</td>
		<!--Main Dashboard TD-->
		<td width=83% valign=top>
			<table width=100% height=100% cellpadding=0 cellspacing=0 border=0 class="yui-navset">
				<tr height=100%>
					<td valign=top>
						<div id="dashboard" class="yui-navset">
							<ul class="yui-nav">
								<li class="selected"><a href="#tab1"><em>Dashboard</em></a></li>
								<li><a href="#tab2"><em>Clients</em></a></li>
								<li><a href="#tab4"><em>Events</em></a></li>
								<li><a href="#tab3"><em>Reports</em></a></li>
								<li><a href="#tab5"><em>Profile</em></a></li>
								<!-- BEGIN telemarketersTab --><li><a href="#tab6"><em>Telemarketers</em></a></li><!-- END telemarketersTab -->
								<!-- BEGIN settingsTab --><li><a href="#tab7"><em>Settings</em></a></li><!-- END settingsTab -->
							</ul>            
							<div class="yui-content">
								<div id="tab1">
									<table height=100% width=100% cellpadding=0 cellspacing=0 border=0>
										<tr>
											<td height={contentHeight}><!-- HEIGHT HERE -->
												<table id="content" cellpadding=0 cellspacing=2 width=100% height=100%>
													<tr valign=top>
														<td class="yui-navset" width=50% id="dashboard_clients_panel" bgcolor=white> 
															<ul class="yui-nav">									
																<li class="selected" style="width: 100%;"><a href="#tab1"><em>Clients To Call</em></a><li>
															</ul>            
															<div id="tab1">
																<div align=center>
																	<iframe id="dashboard_client_content" name="dashboard_client_content" style="border:0px;" src="dashboard/contents/dashboardClientList.php" height={clientToCallListHeight} width=98% marginwidth=0 marginheight=0 hspace=0 vspace=0 framescrolling=auto></iframe>	<!-- HEIGHT HERE -->
																</div>										
															</div>
	
														</td>
														<!--Notification TD-->
														<td class="yui-navset" width=25% bgcolor=white><!-- HEIGHT HERE -->

															<ul class="yui-nav">									
																<li class="selected" style="width: 100%;"><a href="#tab1"><em>Notifications</em></a></li>
															</ul>            
															<div class="dashboard_notifications_headeritem_wrapper" style="background-color: #0066CC">
																<span class="color_white"><span class="font_header" style="margin-left:5px;">Birthdays</span></span>
															</div>
															<div class="dashboard_notifications_item_wrapper">
																Birthday celebrants for today: <input type="button" value="9{BIRTHDAY_COUNT}" onclick="open_notification_window(1, 'Birthday Celebrants')" />
															</div>
															<div class="dashboard_notifications_headeritem_wrapper" style="background-color: #0066CC">
																<span class="color_white"><span class="font_header" style="margin-left:5px;">Made Calls</span></span>
															</div>
															<div class="dashboard_notifications_item_wrapper">
																Number of made calls: <input type="button" value="10{MADE_CALLS_COUNT}" onclick="open_notification_window(2, 'Made Calls')" />
															</div>
															<div class="dashboard_notifications_headeritem_wrapper" style="background-color: #0066CC">
																<span class="color_white"><span class="font_header" style="margin-left:5px;">Unmade Calls</span></span>
															</div>
															<div class="dashboard_notifications_item_wrapper">
																Number of unmade calls: <input type="button" value="11{UNMADE_CALLS_COUNT}" onclick="open_notification_window(3, 'Unmade Calls')" />
															</div>
															<div class="dashboard_notifications_headeritem_wrapper" style="background-color: #0066CC">
																<span class="color_white"><span class="font_header" style="margin-left:5px;">Donation Pickups</span></span>
															</div>
															<div class="dashboard_notifications_item_wrapper">
																Number of donation pickups: <input type="button" value="12{DONATION_PICKUPS_COUNT}" onclick="open_notification_window(4, 'Donation Pickups')" />
															</div>
															<div class="dashboard_notifications_headeritem_wrapper" style="background-color: #0066CC">
																<span class="color_white"><span class="font_header" style="margin-left:5px;">Donated Clients</span></span>
															</div>
															<div class="dashboard_notifications_item_wrapper">
																Number of clients: <input type="button" value="14{DONATED_CLIENTS_COUNT}" onclick="open_notification_window(5, 'Donated Clients')" />
															</div>	
													</td>
													<!--Toolbar TD-->
													<td class="yui-navset" width=25% bgcolor=white><!-- HEIGHT HERE -->
														<ul class="yui-nav">									
															<li class="selected" style="width: 100%;"><a href="#tab1"><em>Toolbar</em></a></li>
														</ul>            
														<div id="tab1">
															<div class="dashboard_toolbar_content_wrapper">
																<div class="dashboard_toolbar_headeritem_wrapper" style="background-color: #0066CC">
																	<span class="color_white"><span class="font_header" style="margin-left:5px;">Donor Search</span>
																</div>	
																<div class="dashboard_toolbar_item_wrapper">
																	<div id="donorSearchBar">													
																		<input id="donorSearchInput" type="text" style="width:97%;"></input>
																		<div id="donorSearchContainer"></div>
																	</div>
																</div>																							
									
																<div class="dashboard_toolbar_headeritem_wrapper" style="background-color: #0066CC">
																	<span class="color_white"><span class="font_header" style="margin-left:5px;">Scratch Pad</span></span>
																</div>							
																<div class="dashboard_toolbar_item_wrapper" style="height:50%;">
																	<textarea id="scratch_pad" style="width:99%; height:390px; overflow-x:hidden;"></textarea><!-- HEIGHT HERE -->
															</div>
														</div>
													</td>	
												</table>
											</td>
										</tr>
									</table>
								</div>
								<div id="tab2">
									<div class="dashboard_wrapper">
										<table height=100% width=100% cellpadding=0 cellspacing=0 border=0>
											<tr>
												<td height={contentHeight}><!-- HEIGHT HERE -->
													
												</td>
											</tr>
										</table>
									</div>
								</div>
								<div id="tab3">
									<div class="dashboard_wrapper">
										<table height=100% width=100% cellpadding=0 cellspacing=0 border=0>
											<tr>
												<td height={contentHeight}><!-- HEIGHT HERE -->
													
												</td>
											</tr>
										</table>
									</div>
								</div>
								<div id="tab4">
									<div class="dashboard_wrapper">
										<table height=100% width=100% cellpadding=0 cellspacing=0 border=0>
											<tr>
												<td height={contentHeight}><!-- HEIGHT HERE -->
													
												</td>
											</tr>
										</table>
									</div>
								</div>
								<div id="tab5">
									<div class="dashboard_wrapper">
										<table height=100% width=100% cellpadding=0 cellspacing=0 border=0>
											<tr>
												<td height={contentHeight}><!-- HEIGHT HERE -->
													<iframe id="profileTabContent" name="profileTabContent" src="dashboard/contents/profileTabContent.php" height={clientToCallListHeight} width=98% marginwidth=0 marginheight=0 hspace=0 vspace=0 framescrolling=auto style="border:0px;"></iframe>	<!-- HEIGHT HERE -->
												</td>
											</tr>
										</table>
									</div>
								</div>
								<!-- BEGIN telemarketersContentTab -->
								<div id="tab6">
									<div class="dashboard_wrapper">
										<table height=100% width=100% cellpadding=0 cellspacing=0 border=0>
											<tr>
												<td height={contentHeight}><!-- HEIGHT HERE -->
													<table id="telemarketerContent" cellpadding=0 cellspacing=2 width=100% height=100%>
													<tr valign=top>
														<td class="yui-navset" width=35% id="telemarketerList" bgcolor=white> 
															<ul class="yui-nav">									
																<li class="selected" style="width: 100%;"><a href="#tab1"><em>Telemarketer List</em></a><li>
															</ul>            
															<div id="tab1">
																<div align=center>
																	<iframe id="telemarketerListContent" name="telemarketerListContent" style="border:0px;" src="dashboard/contents/telemarketerList.php" height={clientToCallListHeight} width=98% marginwidth=0 marginheight=0 hspace=0 vspace=0 framescrolling=auto></iframe>	<!-- HEIGHT HERE -->
															</div>										
														</div>
													</td>
													<!-- Telemarketer's Clients -->
													<td class="yui-navset" width=30% bgcolor=white><!-- HEIGHT HERE -->

													</td>
													<!-- Telemarketer's Performance -->
													<td class="yui-navset" width=25% bgcolor=white><!-- HEIGHT HERE -->
														
													</td>	
												</table>
												</td>
											</tr>
										</table>
									</div>
								</div>
								<!-- END telemarketersContentTab -->
								<!-- BEGIN settingsContentTab -->
								<div id="tab7">
									<div class="dashboard_wrapper">
										<table height=100% width=100% cellpadding=0 cellspacing=0 border=0>
											<tr>
												<td height={contentHeight}><!-- HEIGHT HERE -->
													
												</td>
											</tr>
										</table>
									</div>
								</div>
								<!-- END settingsContentTab -->
							</div>
						</div>
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>

</body>
</html>
